<template>
	<view>
		<view class="">
			<!-- 轮播图 -->
			<swiper class="swiper" indicator-dots="true" autoplay="true" :interval="interval" :duration="duration">
				<swiper-item v-for="(imgItem,index) in swiperImageList" :key="index">
					<image :src="imgItem.image" mode="widthFix" lazy-load></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 选择列 -->
		<view class="indexSelectCenter uni-flex">
			<view  v-for="(landItem, index) in landCorrelation" :key="index" @click="landSelect(index)">
				<image :src="landItem.image" mode="aspectFill" lazy-load></image>
				<view>{{landItem.name}}</view>
			</view>
		</view>
		
		<!-- 统计 -->
		<view class="landStatistics uni-flex">
			<view>
				<view>平台累计土地</view>
				<view>1465465545亩</view>
			</view>
			<view>
				<view>平台已交易土地</view>
				<view>1465465545亩</view>
			</view>
		</view>
		
		<!-- 消息循环推送 -->
		<view class="sysMessage">
			<swiper class="swiperMessage" autoplay="true" vertical="true" :interval="interval" :duration="duration">
				<swiper-item class="swiperItemMessage uni-flex" v-for="(megItem,index) in sysMessage" :key="index" @click="toSysMessage(index)">
					<image src="../../static/image/notice.png" mode="aspectFill" lazy-load></image>
					<view>{{megItem.title}}</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 热门土地信息 -->
		<view class="hotLandInfo">
			<view class="hotLandInfoTitle">
				<image src="../../static/image/hot.png" mode="aspectFill" lazy-load></image>
				热门土地
			</view>
			<swiper :indicator-dots="false" :autoplay="false" style="height: 280upx;">
				<swiper-item v-for="(items, index) in hotLandInfo" :key="index">
					<landInfo :landInfo="items"></landInfo>
				</swiper-item>
			</swiper>
		</view>
		
		<template v-if="landInfoList.length > 0">
			<!-- 展示土地信息 -->
			<view class="exhibitionLandInfo">
				<view class="landInfoTitle">
					<image src="../../static/image/landInfo.png" mode="aspectFill" lazy-load></image>土地信息
				</view>
				<landInfo v-for="(items, index) in landInfoList" :key="index" :landInfo="items"></landInfo>
			</view>
			<!-- 上拉加载 -->
			<loadMore :loadtext="loadtext"></loadMore>
		</template>
		<template v-else-if="landInfoList & RecommendLandInfo">
			<no-land></no-land>
			<!-- 推荐土地 -->
			<recommendLand :recommendland="RecommendLandInfo"></recommendLand>
		</template>
		<template v-else>
			<no-land></no-land>
		</template>
		
	</view>
</template>

<script>
	import landInfo from "../../components/landInfo/landInfo.vue"
	import loadMore from "../../components/common/load-more.vue"
	import recommendLand from "../../components/recommendLand/recommendLand.vue"
	import noLand from '../../components/common/no-land.vue'
	export default {
		components: {
			landInfo,
			loadMore,
			recommendLand,
			noLand
		},
		data() {
			return {
				landCorrelation:[
					{name: "我的土地", image: "../../static/image/myland.png"},
					{name: "土地分类", image: "../../static/image/search.png"},
					{name: "土地资讯", image: "../../static/image/information1.png"},
					{name: "我的收藏", image: "../../static/image/myCollect.png"},
				],
				
				interval: 2000,//自动播放间隔时长
				duration: 500,//切换时长
				swiperImageList: [ 
					{image: "../../static/image/1.jpg"},
					{image: "../../static/image/2.jpg"},
					{image: "../../static/image/3.jpg"},
					{image: "../../static/image/16.jpg"},
					{image: "../../static/image/18.jpg"},
				],
				sysMessage:[  // 系统消息
					{title:"今天又是美好的一天！！"},
					{title:"它在App端使用了nvue的原生渲染，实现高性能的左右拖动长列表；并支持可自定义的任何形式的下拉刷新"},
					{title:"你怎么还没有宠物啊！！！"},
					{title:"它在App端使用了nvue的原生渲染，实现高性能的左右拖动长列表；并支持可自定义的任何形式的下拉刷新"},
				],
				hotLandInfo:[],		// 热门土地
				landInfoList: [],	// 土地信息
				RecommendLandInfo: [],	// 推荐土地
				cityName:'',  // 定位城市
				page: 1,	// 页数
				size: 4,	// 条数
				loadtext:"上拉加载更多",
			}
		},
		
		onLoad(e) {
			
			// console.log(e)
			this.changeLocation();
		},
		
		onLaunch(){
			
		},
		
		onReady(){
			// 获取地理位置
			//this.getLocation();
			// 获取土地信息
			this.getHotLandInfo();
			this.getLandInfo();
			this.getRecommendLandInfo();
			
		},
		
		onShow(){
			
		},
		
		// 监听搜索框,跳转搜索页面
		onNavigationBarSearchInputClicked(){
			uni.switchTab({
				url: '../classify/classify'
			})
		},
		
		// 监听下拉刷新事件
		onPullDownRefresh() {
			this.page = 1;
			this.getLandData();
		},
		
		// 监听上拉触底事件
		onReachBottom(){
			this.loadMore();
		},
		
		// 监听导航栏按钮点击事件
		onNavigationBarButtonTap(e) {
			//console.log(e);
			if(e.float=== "left"){
				// 改变定位信息
				let pages = getCurrentPages()
				let page = pages[pages.length - 1];
				let currentWebview = page.$getAppWebview();
				currentWebview.setTitleNViewButtonStyle(0, {
					text: this.cityName
				});
				uni.navigateTo({
					url:"../location/location"
				})
			}
			else if(e.float==='right'){
				uni.navigateTo({
					url:"../user/userMessage"
				})
			}
		},
		
		methods: {
			
			// 按钮选择列
			landSelect(index){
				if(index === 0){
					
				}
				else if(index === 1){
					uni.switchTab({
						url: '../classify/classify'
					})
				}
				else if(index === 2){
					uni.switchTab({
						url: '../information/information'
					})
				} else {
					let ruser_id = 2;
					uni.navigateTo({
						url:"../user/userCollect/userCollect?ruser_id="+ruser_id
					})
				}
			},
			
			// 携带参数跳转系统信息页面
			toSysMessage(index){
				uni.navigateTo({
					url: '../user/userMessage/userMessage'
				});
			},
			
			// 获取地理位置
			getLocation(){
				uni.getLocation({
					type: 'wgs84',
					geocode:true,
					success: function (res) {
						// console.log(res.address.city);
						var location = res.address.city;
						//console.log(location);
						uni.showModal({ 
							title: '提示',
						    content: '当前定位为  '+location+'  是否切换？',
						    success: function (res) { 
								if (res.confirm) { 
									//console.log(location);
									// 改变定位信息
									let pages = getCurrentPages()
									let page = pages[pages.length - 1];
									let currentWebview = page.$getAppWebview();
									currentWebview.setTitleNViewButtonStyle(0, {
										text: location
									});
									this.cityName = location;
									uni.switchTab({
										url:"../index/index" 
									}) 
								} else if (res.cancel) {
									//console.log('用户点击取消');
								} 
							},
						});
						
						// 重新获取土地信息
						this.getLandInfo();
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			
			// 下拉刷新事件
			getLandData(){
				setTimeout(()=> {
					// 获取数据，重新获取土地信息
					this.getLandInfo();
					// 关闭下拉刷新
					uni.stopPullDownRefresh();
				}, 2000);
			},
			
			// 获取热门土地信息
			async getHotLandInfo(){
				const res=await this.$http({
					url: "/app/landInfo/issueInfoPaging",
					data: {
						city: this.cityName,
						page: this.page,
						size: this.size,
						land_popularity: 1,
					},
				})
				// console.log(res);
				this.hotLandInfo = res.data.data.list.slice(0,5);
			},
			
			// 获取土地信息
			async getLandInfo(){
				const res=await this.$http({
					url: "/app/landInfo/issueInfoPaging",
					data: {
						city: this.cityName,
						page: this.page,
						size: this.size,
					},
				})
				// console.log(res);
				this.landInfoList = res.data.data.list;
			},
			
			// 获取推荐土地信息
			async getRecommendLandInfo(){
				const res=await this.$http({
					url: "/app/landInfo/issueInfoPaging",
					data: {
						city: this.cityName,
						page: this.page,
						size: this.size,
						land_popularity: 2,
					},
				})
				// console.log(res);
				this.RecommendLandInfo = res.data.data.list.slice(0,3);
			},
			
			
			// 改变定位信息
			changeLocation(){
				uni.$on('cityLocation',function(data){
					//console.log('监听location页面携带参数为：' + data.cityName); 
					this.cityName = data.cityName;
					//console.log(this.cityName)
					// 改变定位信息
					let pages = getCurrentPages()
					let page = pages[pages.length - 2];
					let currentWebview = page.$getAppWebview();
					currentWebview.setTitleNViewButtonStyle(0, {
						text: this.cityName
					});
				});
			},
			
			// 上拉加载更多
			loadMore(){
			    if(this.loadtext != "上拉加载更多"){ return;}
			    this.loadtext = "加载中...";	
			    this.page++;
			    setTimeout(() => {
				uni.request({
					url: this.confige.webUrl + "/app/landInfo/issueInfoPaging",
					data:{
						city: this.cityName,
						page: this.page,
						size: this.size,
					},
					header:{},
					success: (res) => {
						// console.log(res);
						if(res.data.code === 206 || res.data.data.pages < this.page){
							this.loadtext = "没有更多数据啦";
							return;
						}
						else if(res.data.code === 200){
							let list = res.data.data.list;
							this.landInfoList.push(...list);
							this.loadtext = "上拉加载更多";
						} else {
						 	this.loadtext = "没有更多数据啦";
						}
					}	
				}	  
				)}, 1000);
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../common/global.less";
	
	.swiper image{
		width: 100%;
	}
	
	.indexSelectCenter{
		padding: 20upx 40upx;
		>view{
			flex: 1;
			text-align: center;
			>image{
				width: 80upx;
				height: 80upx;
				margin: auto;
				// border-radius: 35upx;
				// background: #FE4973;
				// color: #FFFFFF;
			}
			>view{
			}
		}
	}
	
	.landStatistics{
		margin: 20upx 20upx auto;
		text-align: center;
		>view:first-child{
			width: 50%;
		}
		>view:last-child{
			width: 50%;
		}
	}
	
	.sysMessage{
		width: 100%;
		height: 100upx;
		background-color: @uni-bg-color-grey;
		border: 1upx solid @uni-border-color2;
		.swiperMessage{
			height: 60upx;
			width: 100%;
			margin: 20upx 0 auto;
			.swiperItemMessage{
				margin: 10upx 0 auto;
				image{
					width: 40upx;
					height: 40upx;
					margin: 0 @uni-spacing-row-lg auto;
				}
				>view{
					margin: 0 @uni-spacing-row-lg 0 0;
					width: 100%;
					//text-align: center;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
	
	.hotLandInfo{
		.hotLandInfoTitle{
			margin: @uni-spacing-row-base @uni-spacing-row-lg auto;
			font-size: @uni-font-size-lg;
			display: flex;
			align-items: center;
			image{
				width: @uni-img-size-sm;
				height: @uni-img-size-sm;
				margin-right: @uni-spacing-row-sm;
			}
		}
	}
	
	.exhibitionLandInfo{
		.landInfoTitle{
			margin: 0 @uni-spacing-row-lg;
			font-size: @uni-font-size-lg;
			display: flex;
			align-items: center;
			image{
				width: @uni-img-size-sm;
				height: @uni-img-size-sm;
				margin-right: @uni-spacing-row-sm;
			}
		}
		.landInfo{
			margin: 20rpx 20rpx auto;
			display: flex;
			//text-align: center;
			>image{
				width: 250rpx;
				height: 200rpx;
				border-radius: @uni-border-radius-base;
			}
			>view{
				margin: auto;
				width: 450rpx;
				>view:first-child{
					view:first-child{
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					>view:nth-child(2){
						font-size: 15upx;
					}
					>view:nth-child(3){
						font-size: 15upx;
						//font-family: KaiTi;
					}
					view:last-child{
						font-size: 20upx;
					}
				}
				>view:last-child{
					
				}
			}
		}
	}
	
</style>
